<template>
  <a-modal
    :zIndex="1120"
    :width="550"
    :visible="visible"
    :title="modalTitle"
    @cancel="handleClose"
    centered
    :footer="null"
  >
    <div class="preview_item" v-if="materialDetail.material_type == 'text'">
      {{ materialDetail.material_content }}
    </div>
    <div
      class="preview_item"
      v-if="
        materialDetail.material_type == 'video' ||
        (materialDetail.scene_type == 'video' && visible)
      "
    >
      <video
        :autoplay="true"
        style="width: 100%; height: 300px"
        controls
        :src="materialDetail.material_url"
      ></video>
    </div>
    <div
      class="preview_item"
      v-if="
        materialDetail.material_type == 'image' ||
        materialDetail.scene_type == 'image'
      "
    >
      <img style="width: 100%" :src="materialDetail.material_url" alt="" />
    </div>
    <div
      class="preview_item"
      v-if="
        materialDetail.material_type == 'audio' ||
        (materialDetail.scene_type == 'audio' && visible)
      "
    >
      <!-- <video :autoplay="true" controls name="media" class="audio_item">
				<source :src="materialDetail.material_url" type="audio/mp4" />
			</video> -->
      <video :autoplay="true" controls name="media" class="audio_item">
        <source :src="materialDetail.material_url" type="video/mp4" />
        <source :src="materialDetail.material_url" type="video/quicktime" />
        <source :src="materialDetail.material_url" type="video/mpeg" />
        <source :src="materialDetail.material_url" type="video/3gpp" />
      </video>
    </div>
  </a-modal>
</template>

<script>
import {
  defineComponent,
  reactive,
  toRefs,
  computed,
  watch,
  toRaw,
  createVNode,
  ref,
  nextTick,
} from "vue";
import { FolderAddOutlined } from "@ant-design/icons-vue";

export default defineComponent({
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    materialDetail: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },

  components: {},

  setup(props, context) {
    const state = reactive({});

    const handleClose = () => {
      context.emit("close");
    };

    const modalTitle = computed(() => {
      if (props.materialDetail.material_url) {
        return "预览-" + props.materialDetail.material_name;
      } else {
        return "预览文本";
      }
    });

    watch(
      () => props.visible,
      (val) => {}
    );

    return {
      ...toRefs(state),
      modalTitle,
      handleClose,
    };
  },
});
</script>

<style lang="less" scoped>
.preview_item {
  z-index: 9999 !important;
  .audio_item {
    width: 100% !important;
    height: 55px !important;
  }
}
</style>
